<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态库存</title>
    <style>
        html, body {
            width: 100%
        }
        .modal-backdrop {
            opacity: 0 !important;
            filter: alpha(opacity=0) !important;
        }
    </style>
    <link rel="stylesheet" href="../static/css/style.css">

    <script src="../js/jquery-2.1.1.min.js"></script>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../static/js/global.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.0/locale/bootstrap-table-zh-CN.js"></script>
    <script>
        //渲染表格
        $(function () {
            $('#table').bootstrapTable({
                //请求方式  get请求中文会乱码，建议使用post请求
                method: 'post',
                //请求头部的设置
                contentType: 'application/json',
                //路径
                url: '/querySCellAll.action',
                //设置交替行样式
                striped: true,
                //初始显示页号
                pageNumber: 1,
                //设置表格高度
                height: 600,
                //是否显示分页
                pagination: true,
                //设置是服务端分页还是客户端分页
                sidePagination: 'server',
                search:true, //******开启搜索框****//
                searchOnEnterKey:false, //******回车后执行搜索****//
                strictSearch:true,  //******完全匹配****//
                trimOnSearch:true,//去除关键词空格//
                //页大小
                pageSize:5,
                //分页列表
                pageList:[5,10],
                //上传到服务端的参数
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNum: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,

                    };
                },
                // 定义列名
                columns: [
                    {title: 'I级产品分类', field: 'firstKindName', align: 'center'},
                    {title: 'II级产品分类', field: 'secondKindName', align: 'center'},
                    {title: 'III级产品分类', field: 'thirdKindName', align: 'center'},
                    {title: '产品编号', field: 'productId', align: 'center'},
                    {title: '产品名称', field: 'productName', align: 'center'},
                    {title: '库存数量', field: 'amount', align: 'center'},
                    {title: '安全库存上限', field: 'maxAmount', align: 'center'},
                    {title: '安全库存下限', field: 'minAmount', align: 'center'},
                    {title: '库存状态', field: 'checkTag', align: 'center',
                        formatter: function (value,row,index) {
                            if(row.amount<row.minAmount){
                                return "<span class=\"badge badge-warning\"><font>库存数量不足</font><span class=\"ms-1 fas fa-stream\"></span></span>";
                            }else if(row.amount>row.maxAmount){
                                return "<span class=\"badge badge-danger\"><font>库存数量超出</font><span class=\"ms-1 fa fa-redo\"></span></span>";
                            }else if(row.amount<row.maxAmount && row.amount>row.minAmount){
                                return "<span class=\"badge badge-success\"><font>库存数量正常</font><span class=\"ms-1 fa fa-check\"></span></span>";
                            }
                        },
                    }
                ]
            });
        })
    </script>

</head>
<body>
    <table id="table"></table>
</body>
</html>